<template>
	<div class="container">
		<div class="firsthead clearfix">
			<div class="search">
				<form class="bs-example bs-example-form" role="form">
					<div class="row">
						<!-- <div class="col-2"></div> -->
						<div class="col-12">
							<img src="../../assets/logo.png"
								style="margin-left:20%; margin-top:20px; width: 50%; top: -5px;" />
							<!-- <div class="input-group">
								<input type="text" style="width: 200px;" class="form-control" placeholder="查大学,查专业,查咨询">
								<span class="input-group-btn">
									<button class="btn btn-default" type="button">
										<span class="search_button">搜索</span>
									</button>
								</span>
							</div> -->

						</div>
						<div class="col-7"></div>
						<div id="userCity" class="col-3">
							<span style="margin-left: 20px;margin-right: 7px;">{{position}}</span>
							<!-- <el-button type="text" @click="dialogVisible = true">切换城市</el-button> -->
							<el-button type="text" @click="changeCity">定位城市</el-button>

						</div>

						<!-- 登录按钮 -->
						<div style="" class="col-2">
							<el-button type="success" v-show="showLoginButton"
								v-on:click="LRdialogVisible = true,showLoginDiaog = true,showRegDialog = false">登录
							</el-button>
							<span>
								<el-link @click="quit" style="margin-bottom: 15px; margin: 10px;">注销&nbsp;&nbsp;&nbsp;</el-link>
							</span>
							<span v-text="welcomuser"></span>

						</div>
					</div><!-- /.row -->

				</form>
			</div>
		</div>

		<!-- 切换城市的dialog -->
		<!-- 	<el-dialog title="切换城市" v-model="dialogVisible">
			<div id="hot_city" class="row">
				<label style="font-weight: 600;color: #009F95; margin-left: 15px;">选择城市：</label>
				<div id="city_box">
					<el-link :underline="false"
							 v-for="city in cities"
							 @click="selectCity(city)">{{city}}</el-link>
				</div>
			</div>
		</el-dialog> -->

		<!-- 登录的代码 -->
		<el-dialog title="用户登录" v-model="LRdialogVisible" custom-class="logindialoginmain">
			<login v-show="showLoginDiaog" @logined="logined" @showLoginDialog="showLRDialog"></login>
			<reg v-show="showRegDialog" @showLogin="showLogin"></reg>
			<el-link @click="showLoginDiaog = false,showRegDialog = true,el_click()">没有账号？去注册</el-link>
		</el-dialog>



	</div>
</template>

<script>
	import Login from '../loginandreg/Login.vue'
	import Reg from '../loginandreg/Reg.vue'
	import {
		ElMessage
	} from 'element-plus'

	export default {
		name: 'PageTop',
		data() {
			return {
				dialogVisible: false,
				// cities: ["济南","青岛","淄博","枣庄","东营","烟台","潍坊","济宁",
				// 	"泰安","威海","日照","临沂","德州","聊城","滨州","菏泽"],
				// localCity: '青岛',
				cityLocs: [],
				props: {
					multiple: true,
					children: 'citys',
					label: 'city',
					value: 'city',
				},
				welcomuser: '',
				LRdialogVisible: false,
				showLoginDiaog: true,
				showRegDialog: false,
				showLoginButton: true,
				position:'',
			};
		},
		mounted() {
			this.returnPosition();
		},
		created() {
			if (sessionStorage.getItem('welcomuser') != null) {
				this.welcomuser = sessionStorage.getItem('welcomuser');
			}

			if (sessionStorage.getItem('LRdialogVisible') != null) {
				this.LRdialogVisible = this.bool(sessionStorage.getItem('LRdialogVisible'));
			} else {
				this.LRdialogVisible = false;
			}

			if (sessionStorage.getItem('showLoginDiaog') != null) {
				this.showLoginDiaog = this.bool(sessionStorage.getItem('showLoginDiaog'));
			} else {
				this.showLoginDiaog = false;
			}

			if (sessionStorage.getItem('showRegDialog') != null) {
				this.showRegDialog = this.bool(sessionStorage.getItem('showRegDialog'));
			} else {
				this.showRegDialog = false;
			}

			if (sessionStorage.getItem('showLoginButton') != null) {
				this.showLoginButton = this.bool(sessionStorage.getItem('showLoginButton'));
			} else {
				this.showLoginButton = true;
			}

			if(this.welcomuser!=''){
				this.IsUser();
			}

		},
		methods: {
			bool(val) {
				if (val == "true") return true;
				else return false;
			},
			openDrawer() {
				this.drawer = true;
			},
			// selectCity(city){
			// 	this.localCity = city;
			// 	this.dialogVisible = false;
			// 	this.$emit('childByValue', this.localCity)
			// },

			// 自动定位城市
			changeCity() {
				var geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function(r) {
					if (this.getStatus() == BMAP_STATUS_SUCCESS) {
						var mk = new BMap.Marker(r.point);
						var currentLat = r.point.lat;
						var currentLon = r.point.lng;
						var pt = new BMap.Point(currentLon, currentLat);
						var geoc = new BMap.Geocoder();
						geoc.getLocation(pt, function(rs) {
							var addComp = rs.addressComponents;
							console.log(addComp.province + addComp.city);
							localStorage.setItem('province', addComp.province);
							localStorage.setItem('city', addComp.city);
						});
					}
				})
				this.$forceUpdate();
				ElMessage.warning({
					message: '请2s后手动刷新页面获取到城市定位',
					type: 'warning'
				});

			},
			// 返回省市给界面
			returnPosition() {

				var pro ;
				var position = '';
				if(localStorage.getItem('province')!=null){
					pro = localStorage.getItem('province');
				}
				var city;
				if(localStorage.getItem('city')){
					city = localStorage.getItem('city');
				}

				if (pro == null || city == null) {
					position = ''
				} else {
					position = city;
				}

				this.$forceUpdate();
				this.position = position;
			},
			showLRDialog(visible) {
				this.LRdialogVisible = visible;
				sessionStorage.setItem('LRdialogVisible', this.LRdialogVisible);
			},
			el_click() {
				sessionStorage.setItem('showLoginDiaog', false);
				sessionStorage.setItem('showRegDialog', true);
			},
			logined(userName) {
				console.log("我响应了");
				this.showLoginButton = false;
				sessionStorage.setItem('showLoginButton', this.showLoginButton);
				this.welcomuser = "欢迎您," + userName;
				sessionStorage.setItem('welcomuser', this.welcomuser)
			},
			showLogin() {
				this.showRegDialog = false;
				sessionStorage.setItem('showRegDialog', this.showRegDialog);
				this.showLoginDiaog = true;
				sessionStorage.setItem('showLoginDiaog', this.showLoginDiaog);
			},
			quit() {
				sessionStorage.setItem("aTokenofAStrangeUser", "");
				localStorage.setItem
				this.showLoginButton = true;
				sessionStorage.setItem('showLoginButton', this.showLoginButton);
				localStorage.setItem('aTokenofAStrangeUser','');
				sessionStorage.setItem('aTokenofAStrangeUser','');
				this.welcomuser = '';
				sessionStorage.setItem('welcomuser', this.welcomuser)
			},
			IsUser(){
				var param = sessionStorage.getItem('aTokenofAStrangeUser');
				this.$axios
				.post("http://49.232.135.8:8088/back/userinfo/isouruser",param)
				.then(rst=>{
					if(rst.data=='')
					{
						this.welcomuser = '';
						this.showLoginButton = true;
						localStorage.setItem('aTokenofAStrangeUser','');
						sessionStorage.setItem('aTokenofAStrangeUser','');
						sessionStorage.setItem('showLoginButton',true);

					}
					else{
						if(this.$qs.parse(sessionStorage.getItem('aTokenofAStrangeUser')).token!=rst.data.token){
							this.quit()
						} 
					}
				}).catch(ex=>{
					console.log(ex);
				});
			}
		},
		components: {
			"login": Login,
			"reg": Reg
		}
	}
</script>

<style scoped>
	.input-group-btn .btn {
		background-color: #1eb450;

	}

	.search {
		margin-top: -10px;
	}

	.search_button {
		color: white;
	}

	.navigation_bar {
		margin-top: 20px;
	}


	.navigation_bar ul.nav>li>a {
		color: #000000;
		font-size: 17px;
		font-weight: 560;
	}

	#hot_city .el-link {
		margin-left: 25px;
		margin-right: 25px;
		margin-bottom: 5px;
	}

	#city_box {
		margin: 15px;

	}

	:deep().el-dialog__header {
		background-color: #b3f99d;
	}

	:deep().el-dialog__headerbtn i {
		border-radius: 50%;
		background-color: white;
		font-size: 30px;
		visibility: visible;
	}

	:deep().el-dialog__body {
		background-color: #e2fbec;
	}

	:deep().logindialoginmain {
		width: 60%;
		height: 40px;
	}
</style>
